<template>
  <div class="news-container">
    <BaseHeader :navs="navs" :activeNav="activeNav" @nav-change="activeNav = $event" />

    <!-- 新闻类型切换 -->
    <div class="news-tabs">
      <div v-for="(tab, index) in newsTabs" :key="index" :class="['tab-item', { active: currentTab === tab.value }]"
        @click="currentTab = tab.value">
        {{ tab.label }}
      </div>
    </div>
    <div class="news-content">
      <div class="newsDetail-path">首页 > <a>无人机</a></div>
      <!-- 新闻列表 -->
      <div class="wurenjilist">
        <div v-for="(item, index) in newsList" :key="index" class="news-item" @click="handleNewsItemClick(item)">
          <div class="wurenji-actor">
            <img :src="item.image" class="actor-img" />
            CAAC培训课程系列
          </div>
          <div class="news-image">
            <img :src="item.image" :alt="item.title" />
          </div>
          <div class="news-info">
            初级课程
            <div class="price">¥998</div>
          </div>
          <div class="buy-btn">立即购买</div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
          :current-page="currentPage" @current-change="handlePageChange" />
      </div>
    </div>

    <BaseFooter />
    <RightContact />
  </div>
</template>

<script>
import BaseHeader from "@/components/baseHeader.vue";
import BaseFooter from "@/components/baseFooter.vue";
import RightContact from "@/components/rightContact.vue";
export default {
  name: "News",
  components: { BaseHeader, BaseFooter, RightContact },
  data () {
    return {
      navs: ["首页", "新闻", "题库", "资料", "产教课程"],
      activeNav: "新闻",
      newsTabs: [
        { label: "CAAC", value: "latest" },
        { label: "AOPA", value: "exam" },
        { label: "UTC", value: "activity" },
      ],
      currentTab: "latest",
      newsList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  methods: {
    handleNewsItemClick (item) {
      this.$router.push({
        path: "/order",
        query: { id: item.id },
      });
    },
    handlePageChange (page) {
      this.currentPage = page;
      this.fetchNewsList();
    },
    fetchNewsList () {
      // TODO: 根据 currentTab 和 currentPage 获取对应的新闻列表
      // 这里模拟一些数据
      this.newsList = [
        {
          title: "南山区成立信息学创新人才培养基地，育才集团和点猫科技荣获⋯",
          description:
            "8月26日，深圳市南山区”信息学创新人才培养基地”成立仪式在深圳市育才中学举行，点猫科技与深圳市蛇口育才教育集团共同发起成立深圳市南山区“信息学创新人才培养基地”。8月26日，深圳市南山区”信息学创新人才培养基地”成立仪式在深圳市育才中学举行，点猫科技与深圳市蛇口育才教育集团共同发起成立深圳市南山区“信息学创新人才培养基地”。",
          image: require("@/assets/index/newlist.png"),
          date: "2024-03-20 星期二",
          views: 1234,
          id: 1,
        },
        {
          title: "点猫科技与中国教育电视台达成战略合作，携",
          description:
            "6月18日，点猫科技与中国教育电视台达成战略合作。中国教育电视台党委委员、技术管理办公室主任何爱新，点猫科技创始人兼CEO李天驰，以及相关部门负责人出席本次签约仪式。6月18日，点猫科技与中国教育电视台达成战略合作。中国教育电视台党委委员、技术管理办公室主任何爱新，点猫科技创始人兼CEO李天驰，以及相关部门负责人出席本次签约仪式。",
          image: require("@/assets/index/newlist.png"),
          date: "2024-03-20 星期二",
          views: 1234,
        },
        {
          title: "点猫科技与中国教育电视台达成战略合作，携",
          description:
            "6月18日，点猫科技与中国教育电视台达成战略合作。中国教育电视台党委委员、技术管理办公室主任何爱新，点猫科技创始人兼CEO李天驰，以及相关部门负责人出席本次签约仪式。6月18日，点猫科技与中国教育电视台达成战略合作。中国教育电视台党委委员、技术管理办公室主任何爱新，点猫科技创始人兼CEO李天驰，以及相关部门负责人出席本次签约仪式。",
          image: require("@/assets/index/newlist.png"),
          date: "2024-03-20 星期二",
          views: 1234,
        },
        {
          title: "点猫科技与中国教育电视台达成战略合作，携",
          description:
            "6月18日，点猫科技与中国教育电视台达成战略合作。中国教育电视台党委委员、技术管理办公室主任何爱新，点猫科技创始人兼CEO李天驰，以及相关部门负责人出席本次签约仪式。6月18日，点猫科技与中国教育电视台达成战略合作。中国教育电视台党委委员、技术管理办公室主任何爱新，点猫科技创始人兼CEO李天驰，以及相关部门负责人出席本次签约仪式。",
          image: require("@/assets/index/newlist.png"),
          date: "2024-03-20 星期二",
          views: 1234,
        }, {
          title: "点猫科技与中国教育电视台达成战略合作，携",
          description:
            "6月18日，点猫科技与中国教育电视台达成战略合作。中国教育电视台党委委员、技术管理办公室主任何爱新，点猫科技创始人兼CEO李天驰，以及相关部门负责人出席本次签约仪式。6月18日，点猫科技与中国教育电视台达成战略合作。中国教育电视台党委委员、技术管理办公室主任何爱新，点猫科技创始人兼CEO李天驰，以及相关部门负责人出席本次签约仪式。",
          image: require("@/assets/index/newlist.png"),
          date: "2024-03-20 星期二",
          views: 1234,
        },
      ];
    },
  },
  created () {
    this.fetchNewsList();
  },
};
</script>

<style scoped lang="scss">
.news-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.news-content {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.newsDetail-path {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #41464f;
  margin-top: 15px;
  text-align: left;
  margin-bottom: 20px;

  a {
    color: #1664ff;
  }
}

.news-tabs {
  width: 100%;
  height: 52px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;

  .tab-item {
    padding: 10px 60px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;

    &.active {
      color: #1664ff;
    }
  }
}

.wurenjilist {
  // width: 285px;
  // height: 324px;
  // background: #FFFFFF;
  // box-shadow: 0px 2px 12px 0px #E1E3EB;
  // border-radius: 12px;
  // border: 1px solid #FFFFFF;
  // padding: 20px;
  display: flex;
  flex-wrap: wrap;




  .news-item {
    margin-right: 15px;
    width: 265px;
    height: 324px;
    background: #FFFFFF;
    box-shadow: 0px 2px 12px 0px #E1E3EB;
    border-radius: 12px;
    border: 1px solid #FFFFFF;
    padding: 20px;
    margin-bottom: 20px;
  }

  .news-item:nth-child(3n+1) {
    // margin-right: 0;
  }

  .wurenji-actor {
    display: flex;
    font-weight: 500;
    font-size: 15px;
    color: #41464F;

    .actor-img {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }

  .news-image {
    width: 100%;
    height: 151px;
    margin-top: 10px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .news-info {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 18px;
    color: #12192D;
    margin-top: 16px;

    .price {
      font-weight: 600;
      font-size: 18px;
      color: #FF0000;
    }
  }

  .buy-btn {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1664FF;
    border-radius: 6px;
    color: #fff;
    margin-top: 16px;
  }
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
